<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width,initial-scale=1" />
        <title th:text="${poetry.title + ' - ' + poetry.dynasty + ' ' + poetry.author}">博雅诗词</title>
        <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
        <link rel="stylesheet" th:href="@{/bootstrap/css/bootstrap.css}" crossorigin="anonymous">

        <!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
        <link rel="stylesheet" th:href="@{/bootstrap/css/bootstrap-theme.css}" crossorigin="anonymous">

        <script th:src="@{/js/jquery-3.4.1.min.js}" type="text/javascript" charset="utf-8"></script>
        <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
        <script th:src="@{/bootstrap/js/bootstrap.js}" crossorigin="anonymous"></script>
        <script th:src="@{/js/poem.js}" charset="utf-8"></script>
        <link rel="stylesheet" th:href="@{/css/poem.css}">
    </head>
    <body>
        <!-- 导航 -->
        <nav class="navbar navbar-inverse navbar-fix-top" role="navigation">
            <div class="container" th:replace="fragments/header::header">
            </div>
        </nav>

        <div class="container">
            <div class="blog-header">
                <h1 class="blog-title">博雅古诗词</h1>
                <p class="lead blog-description">带你穿越时空，与诗仙一起吟诗作赋。</p>
            </div>
            <div class="row">
                <div class="col-sm-8">

                    <div class="panel panel-default">
                        <div class="panel-heading poem-title">
                            <h3 class="panel-title">
                                <a href="#" th:text="${poetry.title}">静夜思</a></h3>
                        </div>
                        <div class="panel-body">
                            <h6><th:block th:text="${poetry.dynasty}"></th:block>.
                                <a th:href="@{'/author/'+${poetry.authorid}+'/1'}" th:text="${poetry.author}" target="_blank">李白</a></h6><br>
                            <span th:text="${poetry.content}">
                            窗前明月光，疑是地上霜。<br>
                            举头望明月，低头思故乡。
                            </span>

                            <h5 class="page-header"></h5>

                            <div id="voice-text" style="display: none" th:text="${poetry.title} + ':' + ${poetry.dynasty} + ':' + ${poetry.author} + ':' + ${poetry.content}"></div>
                            <button type="button" id="btn-clicks" class="btn btn-default btn-xs active">热度<span class="badge" th:text="${poetryInfo.clicks}">4</span></button>
                            <button type="button" id="btn-collection" class="btn btn-default btn-xs active">收藏<span class="badge" id="bd-collection" th:text="${poetryInfo.collections}">4</span></button>
                            <button type="button" id="btn-difficult" class="btn btn-default btn-xs active">难度<span class="badge" th:text="${poetryInfo.difficult}">4</span></button>
                            <button type="button" id="btn-voice" class="btn btn-default btn-xs active">朗读<span class="badge" th:text="${poetryInfo.voice}">4</span></button>

                        </div>
                    </div>
                    
                    <!-- 注释 -->
                    <div class="panel panel-default">
                        <div class="panel-heading poem-title">
                            <h3 class="panel-title">注释 <small><a th:href="@{'/goNote/'+${poetry.id}}">我要添加</a></small></h3>
                        </div>
                        <div class="panel-body">

                            <span th:if="${#lists.isEmpty(notes)}"><a th:href="@{'/goNote/'+${poetry.id}}">我要添加</a></span>

                            <div th:each="note : ${notes}">
                                <h6>文字来自诗友: <a th:href="@{'/user/'+note.userid}" th:text="${note.nickname}">李白</a></h6><br>
                                <span th:utext="${#strings.replace(note.content,'&#10;','<br>')}">
                                窗前明月光，疑是地上霜。<br>
                                举头望明月，低头思故乡。
                                </span>

                            </div>


                            <!--<h5 class="page-header"></h5>-->

                            <!--<a href="#" class="btn btn-default btn-xs active" role="button">点赞<span class="badge">1</span></a>-->
                            <!--<a href="#" class="btn btn-default btn-xs active" role="button">关注<span class="badge">2</span></a>-->
                            <!--<a href="#" class="btn btn-default btn-xs active" role="button">收藏<span class="badge">4</span></a>-->

                        </div>
                    </div>
                    
                    <!-- 译文 -->
                    <div class="panel panel-default">
                        <div class="panel-heading poem-title">
                            <h3 class="panel-title">
                                译文 <small><a th:href="@{'/goTranslate/'+${poetry.id}}">我要添加</a></small>
                            </h3>
                        </div>
                        <div class="panel-body">
                            <span th:if="${#lists.isEmpty(translates)}"><a th:href="@{'/goTranslate/'+${poetry.id}}">我要添加</a></span>

                            <div th:each="translate : ${translates}">
                                <h6>文字来自诗友: <a th:href="@{'/user/'+translate.userid}" th:text="${translate.nickname}">李白</a></h6><br>
                                <span th:utext="${#strings.replace(translate.content,'&#10;','<br>')}">
                                窗前明月光，疑是地上霜。<br>
                                举头望明月，低头思故乡。
                                </span>

                            </div>
                        </div>
                    </div>
                    
                    <!-- 赏析 -->
                    <div class="panel panel-default">
                        <div class="panel-heading poem-title">
                            <div class="row">
                                <h3 class="panel-title">赏析 <small><a th:href="@{'/goAppreciation/'+${poetry.id}}">我要添加</a></small></h3>
                            </div>
                        </div>
                        <div class="panel-body">
                            <span th:if="${#lists.isEmpty(appreciations)}"><a th:href="@{'/goAppreciation/'+${poetry.id}}">我要添加</a></span>

                            <div th:each="appreciation : ${appreciations}">
                                <h6>文字来自诗友: <a th:href="@{'/user/'+appreciation.userid}" th:text="${appreciation.nickname}">李白</a></h6><br>
                                <span th:utext="${#strings.replace(appreciation.content,'&#10;','<br>')}">
                                窗前明月光，疑是地上霜。<br>
                                举头望明月，低头思故乡。
                                </span>

                            </div>
                        </div>
                    </div>
                    
                    <!-- 故事 -->
                    <div class="panel panel-default">
                        <div class="panel-heading poem-title">
                            <h3 class="panel-title">
                                故事 <small><a th:href="@{'/goStory/'+${poetry.id}}">我要添加</a></small>
                            </h3>
                        </div>
                        <div class="panel-body">
                            <span th:if="${#lists.isEmpty(stories)}"><a th:href="@{'/goStory/'+${poetry.id}}">我要添加</a></span>

                            <div th:each="story : ${stories}">
                                <h6>文字来自诗友: <a th:href="@{'/user/'+story.userid}" th:text="${story.nickname}">李白</a></h6><br>
                                <span th:utext="${#strings.replace(story.content,'&#10;','<br>')}">
                                窗前明月光，疑是地上霜。<br>
                                举头望明月，低头思故乡。
                                </span>

                            </div>
                        </div>
                    </div>

                </div>

                <!-- 左侧栏目 -->
                <div class="col-sm-4">
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            <h5 class="panel-title">
                                <a href="#">作者</a></h5>
                        </div>
                        <div id="left_author" class="panel-body">
                            <a href="#" class="btn btn-default btn-xs" role="button">李白</a>
                            <a href="#" class="btn btn-default btn-xs" role="button">杜甫</a>
                            <a href="#" class="btn btn-default btn-xs" role="button">苏轼</a>
                            <a href="#" class="btn btn-default btn-xs" role="button">孟浩然</a>
                            <a href="#" class="btn btn-default btn-xs" role="button">曹操</a>
                            <a href="#" class="btn btn-default btn-xs" role="button">杜牧</a>
                            <a href="#" class="btn btn-default btn-xs" role="button">李清照</a>
                            <a href="#" class="btn btn-default btn-xs" role="button">袁枚</a>
                        </div>
                    </div>

                    <div class="panel panel-default">
                        <div class="panel-heading">
                            <h5 class="panel-title">
                                <a href="#">标签</a></h5>
                        </div>
                        <div id="left_tag" class="panel-body">
                            <a href="#" class="btn btn-default btn-xs" role="button">四季</a>
                            <a href="#" class="btn btn-default btn-xs" role="button">春天</a>
                            <a href="#" class="btn btn-default btn-xs" role="button">夏天</a>
                            <a href="#" class="btn btn-default btn-xs" role="button">秋天</a>
                            <a href="#" class="btn btn-default btn-xs" role="button">冬天</a>
                            <a href="#" class="btn btn-default btn-xs" role="button">中秋</a>
                            <a href="#" class="btn btn-default btn-xs" role="button">山水</a>
                            <a href="#" class="btn btn-default btn-xs" role="button">田园</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div th:replace="fragments/footer::footer"></div>
        <script type="text/javascript" th:inline="javascript">
            //--
            var user = [[${user}]];
            var poetry = [[${poetry}]];
            console.log(user);

            //--
            $(function () {
                //-- 朗读按钮
                $("#btn-voice").on('click',function() {
                    console.log("reading....")
                    var msg = $(this).siblings("#voice-text").text();
                    console.log(msg);
                    //--H5
                    //AudioPlayBystr(msg);

                    //--百度
                    audioPlay(msg);
                });

                //-- 收藏按钮
                $("#btn-collection").on('click',function() {
                    console.log("collection...");
                    if(user == null) {
                        window.location.href = "/login";
                        return;
                    }
                    else {
                        var param = {};
                        param.userId = user.id;
                        param.poetryId = poetry.id;
                        param.title = poetry.title;
                        console.log(user.id);
                        $.post("/doCollect",param,function(result){
                            console.log(result);
                            if(result.result == 0) {
                                $("#bd-collection").text(result.collections);
                            }
                        });
                    }
                });
            });


        </script>
    </body>
</html>
